.px2rem(@name, @px) {
    @{name}: @px / 75 * 1rem;
}

* {
    padding: 0;
    margin: 0;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
.box {
    display: -webkit-flex;
    display: flex;
}
html,
body {
    width: 100%;
    height: 100%;
    background: #fcfbfb;
}

.padding(@top, @right, @bottom, @left) {
    .px2rem(padding-top,@top);
    .px2rem(padding-right,@right);
    .px2rem(padding-bottom,@bottom);
    .px2rem(padding-left,@left);
}
.margin(@top, @right, @bottom, @left) {
    .px2rem(margin-top,@top);
    .px2rem(margin-right,@right);
    .px2rem(margin-bottom,@bottom);
    .px2rem(margin-left,@left);
}
.pl(@pl) {
    .px2rem(padding-left,@pl);
}
.pr(@pr) {
    .px2rem(padding-right,@pr);
}
.pt(@pt) {
    .px2rem(padding-top,@pt);
}
.pb(@pb) {
    .px2rem(padding-bottom,@pb);
}
.ml(@ml) {
    .px2rem(margin-left,@ml);
}
.mr(@mr) {
    .px2rem(margin-right,@mr);
}
.mt(@mt) {
    .px2rem(margin-top,@mt);
}
.mb(@mb) {
    .px2rem(margin-bottom,@mb);
}
.w(@width) {
    .px2rem(width,@width);
}
.h(@height) {
    .px2rem(height,@height);
}
.lh(@lh) {
    .px2rem(line-height,@lh)
}
.fz(@fz) {
    .px2rem(font-size,@fz)
}
.header{
    .h(102);
    background:#e4366b;
    border-bottom: 1px solid black;
     .box();
    justify-content: center;
    align-items: center;
      li:nth-child(1){
           width:40%;
            img{
               .h(42);
               .w(65);
               .pl(20);
               
            
            }
            
       }
    li:nth-child(2){
        .fz(50);
        flex: 1;
        color: white;
   
    }
}
.content{
    .h(273);
    
    border: 1px solid #c1bfc0;
    border-left: none; 
    border-right: none;
    .box();
    .left{
        img{
            .h(205);
            .w(205);
            .pt(33);
            .pl(38);
           
        }
    } 
    .right{
      .rightt{
          .box();
            justify-content: space-between;

          
        .right-1{
            width:60%;
           
            p:nth-child(1){
                color: #383838;
               .fz(32);
               .pt(40);
               .pl(30);
              
            }
            p:nth-child(2){
                color: #383838;
               .fz(32);
               .pt(17);
               .pl(17);
            }
        }
        .right-1-1{
           img{
               .w(33);
               .h(45);
               .pr(30);
               .pt(40);
              
           }
        } 
        
      }
        
        .right-2{
            
            .box();
            justify-content: space-between;
            .right-1-left{
//              margin: 5px 5px 0 10px;
                span{
                    color:black;
                    .fz(36);
                  
                   
                }
                h4{
                    .fz(38);
                   // font-size: 18px;
                    color: #f65d92;
                    .pl(26);
                    .pt(16);
                    
                }
                .right-p{
                    color: #000;
                    
                    //font-size: 14px;
                    margin: 5px 5px 0 5px;
                    .fz(26);
                    .pt(18);
                    .pl(26);
                    span{
                        .fz(26); 
                        color: #cccccc;
                        text-decoration: line-through;
                    }
                }
            }
            .right-1-right{
             
                img{
                    .w(139);
                    .h(64);
                    .ml(100);
                    .mt(42);
                }

            }


        }
    }
 }
 .content-1{
    .h(273);
    
    border: 1px solid #c1bfc0;
    border-left: none; 
    border-right: none;
    .box();
    .left{
        img{
            .h(205);
            .w(205);
            .pt(33);
            .pl(38);
           
        }
    } 
    .right{
      .rightt{
          .box();
            justify-content: space-between;

          
        .right-1{
            width:60%;
           
            p:nth-child(1){
                color: #383838;
               .fz(32);
               .pt(40);
               .pl(30);
              
            }
            p:nth-child(2){
                color: #383838;
               .fz(32);
               .pt(17);
               .pl(17);
            }
        }
        .right-1-1{
           img{
               .w(33);
               .h(45);
               .pr(30);
               .pt(40);
              
           }
        } 
        
      }
        
        .right-2{
            
            .box();
            justify-content: space-between;
            .right-1-left{
//              margin: 5px 5px 0 10px;
                span{
                    color:black;
                    .fz(36);
                  
                   
                }
                h4{
                    .fz(38);
                   // font-size: 18px;
                    color: #f65d92;
                    .pl(26);
                    .pt(16);
                    
                }
                .right-p{
                    color: #000;
                    
                    //font-size: 14px;
                    margin: 5px 5px 0 5px;
                    .fz(26);
                    .pt(18);
                    .pl(26);
                    span{
                        .fz(26); 
                        color: #cccccc;
                        text-decoration: line-through;
                    }
                }
            }
            .right-1-right{
             
                img{
                    .w(139);
                    .h(64);
                    .ml(100);
                    .mt(42);
                }

            }


        }
    }
 }
 .content-2{
    .h(273);
    
    border: 1px solid #c1bfc0;
    border-left: none; 
    border-right: none;
    .box();
    .left{
        img{
            .h(205);
            .w(205);
            .pt(33);
            .pl(38);
           
        }
    } 
    .right{
      .rightt{
          .box();
            justify-content: space-between;

          
        .right-1{
            width:60%;
           
            p:nth-child(1){
                color: #383838;
               .fz(32);
               .pt(40);
               .pl(30);
              
            }
            p:nth-child(2){
                color: #383838;
               .fz(32);
               .pt(17);
               .pl(17);
            }
        }
        .right-1-1{
           img{
               .w(33);
               .h(45);
               .pr(30);
               .pt(40);
              
           }
        } 
        
      }
        
        .right-2{
            
            .box();
            justify-content: space-between;
            .right-1-left{
//              margin: 5px 5px 0 10px;
                span{
                    color:black;
                    .fz(36);
                  
                   
                }
                h4{
                    .fz(38);
                   // font-size: 18px;
                    color: #f65d92;
                    .pl(26);
                    .pt(16);
                    
                }
                .right-p{
                    color: #000;
                    
                    //font-size: 14px;
                    margin: 5px 5px 0 5px;
                    .fz(26);
                    .pt(18);
                    .pl(26);
                    span{
                        .fz(26); 
                        color: #cccccc;
                        text-decoration: line-through;
                    }
                }
            }
            .right-1-right{
             
                img{
                    .w(139);
                    .h(64);
                    .ml(100);
                    .mt(42);
                }

            }


        }
    }
 }

footer{
    height:auto;
    height:100px;
    background:#484850;
    position:fixed;
    width:100%;
    -webkit-box:1;
    bottom:0;
    right:0;
    left:0;
    .footer-new{
        display: flex;
        justify-content:center;
        align-items:center;
        li{
            text-align:center;
            flex:1;
            padding-top:15px;
            padding-bottom:5px; 
            i{
            	img{
            		width:42px;
            		height:40px;
            	}
            }
            p{
                color: #fff;
              	font-size:24px;
                padding-top:5px;
            }
        }
        li.show{
        	border-top:3px solid #e4366b;
        }
    }
}